Node / mirrors / respira / files / src / components / LeftSidebar.tsx

Displaying Raw • Download

import { useShallow } from 'zustand/react/shallow';

import { useMachineStore, usePatternUploaded } from '../stores/useMachineStore';

import { usePatternStore } from '../stores/usePatternStore';

import { ConnectionPrompt } from './ConnectionPrompt';

import { FileUpload } from './FileUpload';

import { PatternSummaryCard } from './PatternSummaryCard';

import { ProgressMonitor } from './ProgressMonitor';

export function LeftSidebar() {

const { isConnected } = useMachineStore(

useShallow((state) => ({

isConnected: state.isConnected,

}))

);

const { pesData } = usePatternStore(

useShallow((state) => ({

pesData: state.pesData,

}))

);

// Derived state: pattern is uploaded if machine has pattern info

const patternUploaded = usePatternUploaded();

return (

<div className="flex flex-col gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">

{/* Connect Button or Browser Hint - Show when disconnected */}

{!isConnected && <ConnectionPrompt />}

{/* Pattern File - Show during upload stage (before pattern is uploaded) */}

{isConnected && !patternUploaded && <FileUpload />}

{/* Compact Pattern Summary - Show after upload (during sewing stages) */}

{isConnected && patternUploaded && pesData && <PatternSummaryCard />}

{/* Progress Monitor - Show when pattern is uploaded */}

{isConnected && patternUploaded && (

<div className="lg:flex-1 lg:min-h-0">

<ProgressMonitor />

</div>

)}

</div>

);

}